<template>
	<view class="content font_family">
		<u-sticky offsetTop='0'>
			<view class="top f_j" :style="{paddingTop:menuButtonInfo}">
				<image class="back" @click="back" src="../../static/msg/back_icon.png" mode=""></image>
				<view class="top_search f_j">
					<image src="../../static/index/ss_icon.png" mode=""></image>
					<u--input placeholder="请输入关键词检索" border="none" v-model="query_data.keyword"
						@confirm='confirm'></u--input>
				</view>
			</view>
		</u-sticky>
		<view class="list f_z_b f_w" v-if="list.length>0">
			<commodity v-for="(item,index) in list" :type='2' :item='item'></commodity>
		</view>
		<u-empty v-else text='没有商品哦~' icon="/static/public/kong.png">
		</u-empty>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { goods_list, sy_goods_search } from '@/api/page.js'
	export default {
		computed: {
			...mapState(['menuButtonInfo', 'dl_id'])
		},
		data() {
			return {
				list: [],
				query_data: {
					page: 1,
					keyword: '',
					dl: ''
				},
				more: 'loadmore'
			}
		},
		onLoad(e) {
			this.query_data.keyword = e.key
			this.query_data.dl = this.dl_id
			this.get_list()
		},
		onReachBottom() {
			if (this.more == 'loadmore') {
				this.get_list()
			}
		},
		methods: {
			confirm() {
				if (!this.query_data.keyword) {
					uni.showToast({
						icon: 'none',
						title: "输入你想要搜索的商品吧！"
					})
					return
				}
				this.list = []
				this.get_list()
			},
			get_list() {
				sy_goods_search(this.query_data).then(res => {
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.list = [...this.list, ...res.data.data]
							this.query_data.page += 1
							this.more = 'loadmore'
							console.log(this.list)
						} else {
							this.more = 'nomore'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		.top {

			background: linear-gradient(to bottom, rgb(246, 240, 238) 0%, rgb(255, 255, 255) 60%);
			background: #FFFFFF;
			padding-bottom: 30rpx;

			.back {
				margin-left: 30rpx;
				width: 42rpx;
				height: 42rpx;
			}

			.top_search {
				margin-left: 20rpx;
				width: 420rpx;
				padding: 15rpx 30rpx;
				background: #F6F7F9;
				border-radius: 630rpx 630rpx 630rpx 630rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 30rpx;
				}
			}
		}

		.list {
			padding: 30rpx;
		}
	}
</style>